<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="password-box">
		<!-- 登录表单 -->
		<view class="password-from">
			<view class="from-head flex-row-center">
				<text class="text-lin">密码登录</text>
				<text class="text" @click="toVerfication">验证码登录</text>
			</view>
			<!-- 表单 -->
			<view class="from-int">
				<up-input maxlength="11" type="number" color="#D3D5D5" v-model="loginFrom.phone" placeholder="请输入手机号码"
					border="none" :customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">+86</text>
							<up-icon name="arrow-down-fill" color="#949699" size="18rpx"></up-icon>
						</view>
					</template>
				</up-input>
			</view>
			<view class="from-int">
				<up-input :password="isPassword" color="#D3D5D5" v-model="loginFrom.password" placeholder="请输入密码"
					border="none" :customStyle="customStyle" placeholderClass="placeholderClass">
					<template #prefix>
						<view class="prefix-box flex-row-center">
							<text class="prefix-text">密码</text>
						</view>
					</template>
					<template #suffix>
						<view class="suffix-box flex-center" @click="changeisPassword">
							<up-icon name="eye-off" color="#979797" size="32rpx" v-if="isPassword"></up-icon>
							<up-icon name="eye" color="#979797" size="32rpx" v-else></up-icon>
						</view>
					</template>
				</up-input>
			</view>
			<!-- 登录按钮 -->
			<view class="from-btn">
				<up-button text="立即登录" shape="circle" :loading="loginFrom.loadingStatus" @click="submitLogin"
					loadingText="正在登录" :customStyle="{
					height:'88rpx',
					fontWeight: 'bold',
					fontSize: '34rpx',
					color: '#0A534F',
				}" color="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)"></up-button>
			</view>
			<!-- 操作按钮 -->
			<view class="option-box flex-row-center">
				<text class="option-text" @click="toRetrieve">忘记密码？</text>
				<text class="option-text" @click="toRegister()">注册新用户</text>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		onMounted
	} from 'vue';
	import {
		userInfoStore
	} from '../../stores/user';
	const userStore = userInfoStore();
	const props = defineProps({
		checked: {
			default: false
		}
	})
	onMounted(() => {
		setTimeout(() => {
			let info = uni.createSelectorQuery().select(".password-box");
			info.boundingClientRect(function(data) { //data - 各种参数
				// console.log('onMounted', data) // 获取元素宽度
			}).exec()
		}, 1200)
	})
	const emit = defineEmits(['changeState', 'toRegister']);
	const rules = {
		phone: {
			required: true,
			maxLength: 11,
			reg: /^1[3-9]\d{9}$/,
			msg: '请输入正确的手机号'
		},
		password: {
			required: true,
			msg: '请输入密码'
		},
	};
	const customStyle = {
		backgroundColor: "#303335",
		height: '88rpx',
		boxSizing: 'border-box',
		padding: '0 26rpx',
	}
	const isPassword = ref(true);
	const checked = ref(false);
	const loginFrom = reactive({
		phone: '',
		password: '',
		checked: computed(() => props.checked),
		loadingStatus: false
	})
	const changeisPassword = () => { //切换密码框属性
		isPassword.value = !isPassword.value
	}
	const toVerfication = () => { //切换验证码登录
		emit('changeState', 'verification');
	}
	const toRegister = () => { //去注册
		emit('toRegister');
	}
	const toRetrieve = () => { //去重置
		uni.navigateTo({
			url: "/pages/login/retrievePassWrod"
		})
	}
	const changeChecked = (e) => {
		loginFrom.checked = e;
	}
	const submitLogin = async () => { //登录
		if (loginFrom.loadingStatus) return
		const validate = validateForm(loginFrom, rules); //验证
		if (!validate.status) return


		if (!loginFrom.checked) {
			uni.$u.toast('请先勾选协议');
			return
		}
		loginFrom.loadingStatus = true;

		const {
			code,
			data,
			msg
		} = await $Api.login.login({
			account: loginFrom.phone,
			password: loginFrom.password,
		}); //注册登录
		if (code == '1') {
			uni.showToast({
				title: '登录成功！'
			})
			if (data && data.userinfo) {
				uni.setStorageSync('user_token', data.userinfo.token);
				// userStore.getUserInfo();
				userStore.setUserInfo(data.userinfo);
			}
			setTimeout(() => {
				loginFrom.loadingStatus = false;
				uni.$emit('refreshLevel', {
					type: 'level',
					msg: '刷新组队'
				})
				uni.switchTab({
					url: '/pages/main/main'
				})
			}, 800)
		} else {
			loginFrom.loadingStatus = false;
			uni.$u.toast(msg);
		}
	}
</script>
<style>
	.placeholderClass {
		font-weight: 500;
		font-size: 30rpx;
		color: #F8F8F8;

	}
</style>
<style lang="scss" scoped>
	.password-box {
		width: 100%;
		// height: 100%;
		// height: auto;
		box-sizing: border-box;
	}

	.password-from {
		margin-top: 64rpx;

		.from-head {
			justify-content: space-between;

			.text-lin {
				font-weight: 500;
				font-size: 28rpx;
				color: #D3D5D5;
			}

			.text {
				font-weight: 400;
				font-size: 28rpx;
				color: #696F70;
			}
		}

		.from-int {
			margin-top: 40rpx;

			.prefix-box {
				width: 128rpx;
				height: 100%;

				.prefix-text {
					font-weight: 500;
					font-size: 30rpx;
					color: #DEDEDE;
					margin-right: 4rpx;
				}
			}

			.suffix-box {}
		}

		.from-btn {
			margin-top: 154rpx;
			width: 100%;
		}

		.option-box {
			width: 100%;
			justify-content: space-between;
			margin-top: 48rpx;

			.option-text {
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(255, 255, 255, 0.6);
			}
		}
	}

	.agreement-box {
		width: 100%;
		position: absolute;
		bottom: 112rpx;
		left: 0;
		justify-content: center;

		.content {
			font-weight: 500;
			font-size: 24rpx;
			margin-left: 8rpx;

			.text {
				color: #999999;
			}

			.agreement-name {
				color: #559992;
			}
		}
	}
</style>